<template>
  <div class="bg">
    <div class="logo">logo</div>
    <div class="list">
      <span>关于我们</span>
      <span>联系我们</span>
      <span>新闻中心</span>
      <span>加入我们</span>
      <span>产品与服务</span>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  setup() {},
};
</script>

<style lang="scss" scoped>
.bg {
  background-color: rgb(43, 41, 41);
  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.4);
}
.logo {
  top: 5px;
  position: absolute;
  width: 100px;
  height: 50px;
  left: 40%;
  background-color: rgb(201, 114, 114);
}
.logo:hover {
    cursor: pointer;
}
.list {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  top: 5px;
  left: 50%;
  height: 50px;
  span {
    padding: 2px 10px;
    color: rgb(224, 224, 224);
  }
  span:hover {
    color: rgb(231, 228, 49);
    cursor: pointer;
  }
}
</style>